<template>
  <div id="home">
    <Navbar class="nav-bar">
      <template slot="center">
        购物街
      </template>
    </Navbar>
    <TabControl
      ref="TabControl1"
      :title="['流行', '新款', '精选']"
      @tabClick="tabClick"
      class="fixed"
      v-show="isTabFixed"
    />
    <Scroll
      class="content"
      ref="scroll"
      :probeType="3"
      :pullUpLoad="true"
      @scroll="scroll"
      @pullingUp="loadMore"
    >
      <template>
        <Swiper :banners="banners" @swiperImageLoad="swiperImageLoad" />
        <Recommend :recommends="recommends" />
        <Fashion />
        <TabControl
          ref="TabControl2"
          :title="['流行', '新款', '精选']"
          @tabClick="tabClick"
          v-show="!isTabFixed"
          :class="{ fixed: isTabFixed }"
        />

        <GoodsList
          :goods="goods[currentType].list"
          :class="{ GoodsListBefore: isTabFixed }"
        />
      </template>
    </Scroll>

    <BackTop
      class="back-top"
      @click.native="backTop"
      v-show="position > 1000"
    />
    <Footerbar />
  </div>
</template>

<script>
import Swiper from '@/components/common/home/swiper.vue'
import Recommend from '@/components/common/home/recommend.vue'
import TabControl from '@/components/common/home/tabControl.vue'
import Fashion from '@/components/common/home/fashion.vue'
import GoodsList from '@/components/common/goods/goodsList'

import Navbar from '@/components/content/navbar/'
import BackTop from '@/components/content/backTop/'
import Footerbar from '@/components/content/footerbar/'
import Scroll from '@/components/content/scroll/'
import { getHomeMultidata, getHomeGoods } from '@/utils/home/'

export default {
  name: 'home',
  components: {
    Navbar,
    Swiper, // 轮播图
    Recommend, // 推荐
    Fashion, // 流行
    TabControl, //
    GoodsList, // 商品列表
    Scroll, // scroll 封装
    BackTop, //
    Footerbar,
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: 'pop', // 记录着 流行 新款 精选
      position: 0, //滚动条y轴的位置
      taboffsetTop: 0, // TabControl组件的 offsetTop的值
      isTabFixed: false,
    }
  },
  created() {
    this.GetHomeMultidata()
    this.GetHomeGoods('pop')
    this.GetHomeGoods('new')
    this.GetHomeGoods('sell')
  },
  methods: {
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs.TabControl1.myIndex = index
      this.$refs.TabControl2.myIndex = index
    },
    // 拿到滚动跳的位置
    scroll(position) {
      // console.log(position.y);
      this.position = -position.y
      //1. TabControl组件 是否吸顶
      if (this.position > this.taboffsetTop) {
        this.isTabFixed = true
      } else {
        this.isTabFixed = false
      }
    },
    // 点击回到顶部
    backTop() {
      // 拿到Scroll组件对象调用Back方法 Back(x,y,time)
      this.$refs.scroll.Back(0, 0, 500)
    },
    // 下拉加载更多
    loadMore() {
      setTimeout(() => {
        this.GetHomeGoods(this.currentType)
        //console.log('请求数据');
      }, 1000)
      this.$refs.scroll.refresh()
    },
    //监听轮播图 图片加载完成
    swiperImageLoad() {
      this.taboffsetTop = this.$refs.TabControl2.$el.offsetTop
      console.log(this.taboffsetTop)
    },
    // 请求
    GetHomeMultidata() {
      getHomeMultidata().then((res) => {
        ;(this.banners = res.data.data.banner.list),
          (this.recommends = res.data.data.recommend.list)
      })
    },
    GetHomeGoods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.data.list)
        this.goods[type].page += 1
        this.$refs.scroll.finishPullUp()
      })
    },
  },
}
</script>
<style scoped>
#home {
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
}
.content {
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  right: 0;
}
.back-top {
  position: fixed;
  z-index: 5;
  bottom: 60px;
  right: 10px;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 43px;
  z-index: 5;
  background-color: #fff;
}
.GoodsListBefore::before {
  content: '';
  height: 40px;
  width: 100%;
  display: block;
}
</style>
